<template>
  <div class="products-page">
    <div class="content-wrapper">
      <!-- 顶部Tab分类 -->
      <van-tabs
        v-model:active="selectedCategoryId"
        swipeable
        line-width="30"
        color="#d6c4a4"
        background="#1a0e0e"
        @change="onTabChange"
      >
        <van-tab
          v-for="cat in categories"
          :key="cat.id"
          :title="cat.name"
          :name="cat.id"
        />
      </van-tabs>

      <!-- 产品列表 -->
      <div class="product-list">
        <div
          class="product-card"
          v-for="product in products"
          :key="product.id"
          @click="goProduct(product.id)"
        >
          <div class="card-main">
            <div class="product-image">
              <img :src="product.logo" :alt="product.name" />
            </div>
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <div class="price">COP{{ formatNumber(product.price) }}</div>
            </div>
            <div class="invest-btn">{{ t("products_investBtn") }}</div>
          </div>
          <div class="product-details">
            <div class="detail-row">
              <div class="detail-item">
                <span class="label">{{ t("gpuinfo_vipCondition") }}</span>
                <span class="value">
                  {{ t("gpuinfo_vipLevel", { w: product.lever || "1" }) }}</span
                >
              </div>
              <div class="separator"></div>
              <div class="detail-item">
                <span class="label"
                  >{{ t("products_perDay") }}{{ t("products_income") }}
                </span>
                <span class="value"
                  >COP{{ formatNumber(getDailyEarnings(product)) }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 加载状态和空状态 -->
        <div class="loading-container" v-if="loading">
          <van-loading type="spinner" color="#f6eade" size="24px" />
        </div>
        <div class="empty-container" v-if="!loading && products.length === 0">
          <p>{{ t("products_empty") }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getLockType, getLockMallList } from "@/api/products";
import { showToast } from "vant";
import { formatNumber } from "@/utils/public";

const router = useRouter();
const loading = ref(false);
const { t } = useI18n();
// 分类和产品数据
const categories = ref<any[]>([]);
const selectedCategoryId = ref<string>("");
const products = ref<any[]>([]);

// 获取产品类型列表
const getCategories = async () => {
  try {
    loading.value = true;
    const res = await getLockType();
    if (res.code === 200 && res.data && res.data.length > 0) {
      categories.value = res.data;
      // 默认选择第一个类别
      selectedCategoryId.value = categories.value[0].id;
      // 获取第一个分类的产品
      getProductList(categories.value[0].id);
    } else {
      showToast(res.msg || t("products_getTypeFail"));
    }
  } catch (error) {
    console.error("err", error);
    showToast(t("products_networkError"));
  } finally {
    loading.value = false;
  }
};

// 获取产品列表
const getProductList = async (typeId: string) => {
  try {
    loading.value = true;
    const res = await getLockMallList({ id: typeId });
    if (res.code === 200) {
      products.value = res.data || [];
    } else {
      showToast(res.msg || t("products_getListFail"));
    }
  } catch (error) {
    showToast(t("products_networkError"));
  } finally {
    loading.value = false;
  }
};

// 计算每日收益范围
const getDailyEarnings = (product: any) => {
  const price = parseFloat(product.price);
  const dayIncomeHigh = parseFloat(product.dayIncomeHigh);

  const highEarning = Math.round(price * dayIncomeHigh);

  return `${highEarning}`;
};

// Tab切换事件
function onTabChange(name: string) {
  selectedCategoryId.value = name;
  getProductList(name);
}

// 跳转到产品详情页
const goProduct = (id: string) => {
  router.push(`/gpuinfo?id=${id}`);
};

onMounted(() => {
  getCategories();
});
</script>

<style scoped>
.products-page {
  height: calc(100vh - 90px); /* 减去TabBar的高度 */
  overflow: hidden;
  background: url("../../assets/images/login/topBg.png") no-repeat top;
  background-size: 100% auto;
}

.content-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #f6eade;
}

.van-tabs {
  background: #1a0e0e;
}

.product-list {
  flex: 1;
  overflow-y: auto;
  padding: 17px 17px 20px;
  background: linear-gradient(
    0deg,
    rgba(254, 242, 230, 0) 10%,
    rgba(254, 237, 221, 0.05) 63%
  );
  border-top: 1px solid rgba(254, 237, 221, 0.5);
  border-radius: 18px 18px 0 0;
  -webkit-overflow-scrolling: touch;
}

.product-card {
  width: 100%;
  overflow: hidden;
  margin: 0 0 15px 0;
  border-radius: 15px;
  background: linear-gradient(
    180deg,
    rgba(254, 242, 230, 0) 4%,
    rgba(254, 237, 221, 0.1) 62%
  );
}

.card-main {
  padding: 15px 0 15px 15px;
  background: rgba(254, 242, 230, 0.1);
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.product-image {
  width: 120px;
  height: 85px;
  overflow: hidden;
  margin: 0 17px 0 0;
  border-radius: 5px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
}

.product-info {
  flex: 1;
  padding-right: 10px;
  h3 {
    font-size: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 限制行数为2 */
    overflow: hidden;
    margin: 0;
  }
  .price {
    color: #ffa25f;
    margin-top: 2px;
    padding: 0 2px 2px 0;
    font-size: 15px;
  }
}

.invest-btn {
  position: absolute;
  right: 0;
  top: 60px;
  text-align: center;
  line-height: 30px;
  width: 100px;
  height: 30px;
  overflow: hidden;
  color: #0c1f26;
  background: url("../../assets/images/btnBg1.png") no-repeat;
  background-size: 100% 100%;
}

.product-details {
  border-radius: 0 0 12px 12px;
  padding: 15px;
}

.detail-row {
  display: flex;
  align-items: flex-start;
  font-size: 13px;
}

.detail-item {
  width: 160px;
  display: flex;
  flex-direction: column;
}
.detail-item:last-child {
  width: auto;
  padding-left: 17px;
}

.separator {
  width: 2px;
  height: 30px;
  overflow: hidden;
  border-left: 2px dotted rgba(255, 215, 162, 0.25);
}

.label {
  padding: 0 0 5px 0;
  font-size: 12px;
  color: hsla(0, 0%, 100%, 0.6);
}

.value {
  color: #f6eade;
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.empty-container {
  color: rgba(246, 234, 222, 0.6);
  font-size: 14px;
}

:deep(.van-tabs--line .van-tabs__wrap) {
  height: 50px;
  margin-top: 20px;
  padding: 0 10px;
}
:deep(.van-tab) {
  color: #999 !important; /* 未选中文字为白色 */
}
:deep(.van-tab--active) {
  color: #fff !important; /* 选中tab文字为白色 */
}
:deep(.van-tabs__wrap) {
  justify-content: flex-start !important;
  overflow-x: auto !important; /* 保证超出时可滚动 */
}
:deep(.van-tabs__nav) {
  white-space: nowrap !important; /* 保证tab横向排列不换行 */
}
</style>
